
import React , {Component} from "react"
import ReactDOM , {render} from  "react-dom";
import { Toast, WhiteSpace, WingBlank, Button,Carousel,PullToRefresh,ListView } from "antd-mobile";
import {Link} from "react-router-dom"
import Head from "../../components/head"
import nav1 from "../../../assets/images/nav1.png"
import nav2 from "../../../assets/images/nav2.png"
import nav3 from "../../../assets/images/nav3.png"
import {change_banner,change_indexContent} from "../../actions"
import {secondsFormatYear} from "../../utils/common.js"
import {connect} from "react-redux"
@connect(
    state=>({
        banners:state.banners,
        indexContent:state.indexContent
    })
)
export default class Index extends Component{
    constructor(props){
        super(props)
    }
   
    componentWillMount(){
        const {dispatch}=this.props;
        dispatch(change_banner("/banner",dispatch));
        dispatch(change_indexContent("/indexContent",dispatch));
    }
    render(){
        const {history} = this.props;
        // console.log(this.props.banners)
        var items;
        if(this.props.banners!=""){
        //  console.log(this.props.banners)
          items=  this.props.banners.map((item,idx)=>{
            return (<img src={item.thumb} key={idx}/>)
            })
        }
        var lists
        if(this.props.indexContent!=""){
            //  console.log(this.props.banners)
              lists=  this.props.indexContent.map((list,lis)=>{
                var times=secondsFormatYear(list.starttime*1000,"yyyy-MM-dd")
                return (
                    <div  className="indexContent" key={lis}>
                        <div className="iconCycle clearfix">
                            <img className="cycleImg" src={list.thumb} />
                            <div className="icon">
                                <img src={list.avatar}/>
                            </div>
                            <span className="iconSpan">{list.username}</span>
                            <span className="time"><i className="iconfont icon-shizhong"></i>{times}</span>
                        </div>
                    </div>
                    )
                })
            }
     
        return (
           <div className="indexs">
                <Head/>
                <div className="banner">
                    <Carousel
                    //  dots={true}
                     autoplay={true}
                     autoplayInterval={2000}
                     infinite={true}
                     >
                        {items}
                    </Carousel>
                </div>
                <div className="indexNav">
                    <ul className="indexBox clearfix">
                        <li onClick={()=>{history.push("/play?url="+nav1)}}>
                            <img src={nav1}/>
                        </li>
                        <li>
                        </li>
                        <li onClick={()=>{history.push("/play?url="+nav3)}}>
                            <img src={nav3}/>
                        </li>
                    </ul>
                    <div className="cycle" onClick={()=>{history.push("/play?url="+nav2)}}>                                                                                                                                                                 
                        <img src={nav2}/>
                    </div>
                </div>
                <div>
                    {lists}
                </div>
           </div>
        )
    }
}